<template>
  <div>欢迎用户:
    <h1 class="h1">{{ uid }}</h1>回来!
    <!-- <h1 class="h1">欢迎用户: {{ $route.params.uid }} 回来!</h1> -->
  </div>
</template>
<script>
export default {
  //
  props: {
    uid: {
      type: [String, Number],
      default: "李忠新"
    }
  },
  beforeRouteEnter(to, from, next) {
    // to(当前路由对象)要跳转到的页面 from(上一个路由对象)从那里跳转来
    // 此处页面还没有渲染无法获取this(但是可以在next(vm =>{ 这里调用})) 路由触发 将要进入时调用. 不调用next()可看到详细
    // console.log(to.name);
    // console.log(from.name);
    next(vm => {
      console.log(vm); //this实例);
    });
  },
  beforeRouteLeave(to, from, next) {
    // this 组件的实例
    // 路由即将离开时调用
    next();
  },
  // this
  //组件路由发生变化组件被复用时调用(
  // url发生变化,组件是复用组件是才会被调用.)
  beforeUpdate(to, from, next) {
    next();
  }
};
</script>
<style>
.h1 {
  color: red;
}
</style>
